<style>
    img.fans-portrait {
        width: 50px;
        height: 50px;
    }

    .fsh-rightPanel .layui-table-body .layui-table-cell {
        height: 50px;
        line-height: 50px;
    }

    .fsh-rightPanel {
        background: white;
    }

    #list li {
        display: inline-block;
        padding: 20px 20px;
        box-sizing: border-box;
        width: 250px;
        text-align: center;
        overflow: hidden;
        position: relative;
    }

    #list li:hover {
        background: #f3f3f3;
        cursor: pointer;
    }

    #list img {
        width: 180px;
        height: 120px;
        border-radius: 5px;
    }

    #list .title {
        padding-top: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #page {
        position: absolute;
        bottom: 50px;
        left: 0;
        right: 0;
        text-align: center;
    }
    #dialog_sort {
        position: absolute;
        top: 65px;
        left: 20px;
        right: 500px;
        background: white;
        height: 400px;
        padding: 20px;
        box-sizing: border-box;
        overflow-y: auto;
        display: none;
        border: 1px solid #E3E3E3;
    }

    #dialog_sort .sort-level1 > span {
        color: black;
        font-size: 16px;
        cursor: pointer;
    }

    #dialog_sort .sort-level1 {
        clear: left;
    }

    #dialog_sort .sort-level2 {
        padding: 10px;
        box-sizing: border-box;
        flex-flow: column;
    }

    #dialog_sort .sort-level2 span {
        line-height: 30px;
        width: 80px;
        text-align: center;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
    }
</style>
<div class="fsh-rightPanel">
    <div class="layui-anim layui-anim-upbit">
        <div class="layui-form-item wx-search" id="list_form">
                <span class="layui-btn layui-btn-primary" id="btn-srot"><i class="iconfont icon-category"></i><span
                        id="sort_title">全部</span></span>
            <div class="layui-inline" style="padding-top: 5px">
                <input style="display:none" type="password"/>
                <input type="text" placeholder="请输入名称" readonly="readonly" class="layui-input" id="title" >
                </label>
            </div>
            <button class="layui-btn" id="search">搜索</button>
        </div>
        <ul id="list">

        </ul>
    </div>
    <div id="page"></div>
</div>


<div id="dialog_sort">
    <div class="sort-level1">
        <span href="#">CG</span>
        <div class="sort-level2">
            <span>基础</span> <span>基础</span> <span>基础</span> <span>基础</span> <span>基础</span> <span>基础</span>
        </div>
        <span>动画</span>
        <div class="sort-level2">
            <span>基础</span> <span>基础</span> <span>基础</span> <span>基础</span>
        </div>
        <span>VR</span>
        <div class="sort-level2">
            <span>基础</span> <span>基础</span> <span>基础</span>
        </div>
        <span>引擎</span>
        <div class="sort-level2">
            <span>基础</span> <span>基础</span> <span>基础</span>
        </div>
    </div>
</div>
<script>
    //获取数据
    var page = 1;
    var pageSize = 20;
    var layPage;
    var title;
    layui.use(['layer', 'form', 'laypage'], function () {
        var layer = layui.layer;
        var form = layui.form;
        layPage = layui.laypage;
        layPage.render({
            elem: 'page'
            , count: 1000
            , limit: 20
            , limits: [10, 20, 30, 50]
            , jump: function (obj) {
                // page = obj.curr;
                // loadListData();
            }
        });
        list = $('#list');
        for (var i = 0; i < 20; i++) {
            var li = ' <li>\n' +
                '                <p class="cover"><img src="./res/images/index-header.jpg" alt=""/></p>\n' +
                '                <p class="title">VR基础课程</p>\n' +
                '            </li>';
            list.append(li);
        }
        list.find('li').click(function () {

        });
        setTimeout(function removeReadonly() {
            var title = document.getElementById("title");
            title.removeAttribute("readonly");
        }, 20);
        //新增课件
        $('#add_item').click(function () {
            createNewItem();
        });
        //搜索
        $('#search').click(function () {
            title = $('#title').val();
        });
        // firstLoadData();
        // 分类
        $("#btn-srot").click(function () {
            $('#dialog_sort').toggle();
        });
        $("#dialog_sort").click(function () {
            $('#dialog_sort').hide();
        });
    });


    function firstLoadData() {
        //自定义每页条数的选择项
        page = 1;
        $.ajax({
            url: context + '/api/squadCourse/getSquadCourse?squad_id=' + userInfo.squad_id,
            type: "GET",
            success: function (result) {
                if (result.success) {

                } else {
                    layer.msg(result.msg);
                }
            }
        });

    }

    function loadListData() {
        var list = $('#list');
        list.empty();
        $.ajax({
            url: context + '/api/squadCourse/getSquadCourse?squad_id=' + userInfo.squad_id + '&page=' + page + '&pageSize=' + pageSize,
            type: "GET",
            success: function (result) {
                if (result.success) {
                    var data = result.data;
                    totalCount = data.count;
                    for (var i = 0; i < data.length; i++) {
                        var li = '';
                        li += '    <li id="' + i + '">\n' +
                            '                <p class="cover"><img src="' + data[i].courses.img_url + '" alt=""/></p>\n' +
                            '                <p class="title">' + data[i].courses.course_task + '</p>\n' +
                            '                <p title="删除" class="iconfont del" id="' + data[i].course_id + '"></p>\n' +
                            '                <p title="修改" class="iconfont edit" id="' + i + '"></p>\n' +
                            '            </li>';
                        list.append(li);
                    }


                    // //显示删除
                    // list.find('li').mouseenter(function () {
                    //     $(this).find('p.del').addClass('icon-delete');
                    //     $(this).find('p.edit').addClass('icon-edit');
                    // });
                    // //隐藏删除
                    // list.find('li').mouseleave(function () {
                    //     $(this).find('p.del').removeClass('icon-delete');
                    //     $(this).find('p.edit').removeClass('icon-edit');
                    // });
                    //删除
                    list.find('p.del').click(function () {
                        event.stopPropagation();
                        var id = $(this).prop('id');
                        layer.confirm('确认删除此课程？', {
                            icon: 7,
                            title: "提示",
                            btn: ['确认', '取消'] //按钮
                        }, function () {
                            $.ajax({
                                url: context + '/api/educourse/' + id,
                                type: "DELETE",
                                success: function (result) {
                                    if (result.success && result.data > 0) {
                                        layer.msg("删除成功");
                                        firstLoadData();
                                    } else {
                                        layer.msg("删除失败");
                                    }
                                },
                                error: function () {
                                    layer.msg("删除异常");
                                }
                            })
                        }, function () {
                            layer.closeAll();
                        });
                    });
                    //修改
                    list.find('p.edit').click(function () {
                        event.stopPropagation();
                        var index = $(this).prop('id');
                        showDialog({
                            title: '修改课程'
                            , type: 'get'
                            , width: 1000
                            , height: 700
                            , template: 'edit'
                            , htmlData: data[index]
                            , yes: function (index, layero) {
                                layui.form.on('submit(*)', function (data) {

                                    $.ajax({
                                        url: context + '/api/educourse/updateOne',
                                        type: 'PATCH',
                                        dataType: 'json',
                                        contentType: "application/json;charset-UTF-8",
                                        data: JSON.stringify(data.field),
                                        success: function (result) {
                                            if (result.success) {
                                                layer.msg("修改成功");
                                                layer.close(index);
                                                firstLoadData();
                                            } else {
                                                layer.msg(result.msg);
                                            }
                                        },
                                        error: function () {
                                            layer.msg("修改失败");
                                        }
                                    })
                                });

                                //表单验证
                                layui.form.validate();//默认form名称为add_form（可不填写）
                            }

                        })
                    });
                    //详情
                    list.find('li').click(function () {
                            var index = $(this).prop('id');
                            var id = data[index].course_id;
                            jump('./views/school/courseware/template/detail[id=' + id + ']');
                        }
                    );
                } else {
                    layer.msg(result.msg);
                }
            }
        })
        ;
    }

    function createNewItem() {
        showDialog({
            title: '新增课程'
            , type: 'get'
            , width: 1000
            , height: 700
            , template: 'desc.html'
            , yes: function (index, layero) {
                layui.form.on('submit(*)', function (data) {
                    $.ajax({
                        url: context + '/api/educourse/insertOne',
                        type: 'POST',
                        dataType: 'json',
                        contentType: "application/json;charset-UTF-8",
                        data: JSON.stringify(data.field),
                        success: function (result) {
                            if (result.success) {
                                layer.msg("添加成功");
                                layer.close(index);
                                firstLoadData();
                            } else {
                                layer.msg(result.msg);
                            }
                        },
                        error: function () {
                            layer.msg("添加失败");
                        }
                    })
                    // for (var i = 0; i < 30; i++) {
                    //
                    // }
                });

                //表单验证
                layui.form.validate();//默认form名称为add_form（可不填写）
            }

        })
    }
</script>

